<template>
    <div class="login-container">
        <div class="particle-storm"></div>
        <div class="bubble-3d">
            <div class="bubble-layer"></div>
            <div class="bubble-layer"></div>
        </div>
        <!-- 顶部系统标识 -->
        <div class="system-brand">
            <h1 class="system-title">食源安培训考试系统</h1>
        </div>

        <!-- 登录卡片 -->
        <el-card class="login-card">
            <div class="card-header">
                <h2 class="welcome-text">欢迎回来</h2>
                <p class="welcome-tip">请输入您的账号信息开始培训</p>
            </div>

            <el-form :model="form" @submit.prevent="handleLogin" class="login-form">
                <!-- 账号输入 -->
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入账号" class="custom-input">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <!-- 密码输入 -->
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password
                        class="custom-input">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <!-- 操作区 -->
                <div class="action-area">
                    <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
                    <!-- <el-link type="primary" :underline="false">忘记密码?</el-link> -->
                </div>

                <!-- 登录按钮 -->
                <el-button native-type="submit" class="login-btn" :loading="loading">
                    {{ loading ? '登录中...' : '立即登录' }}
                </el-button>
            </el-form>

            <!-- 备案信息 -->
            <div class="footer">
                <el-divider />
                <p class="record-info">©2025 食源安培训中心 苏ICP备2020060316号-2</p>
            </div>
        </el-card>

        <!-- 动态背景 -->
        <div class="decorate-circle circle-1"></div>
        <div class="decorate-circle circle-2"></div>
    </div>
</template>

<script setup>
import { examApi } from '@/api/exam'
import { User, Lock } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { saveToLocal, getFromLocal } from '@/utils/index.js'
import { ElMessage } from 'element-plus'
const loading = ref(false)
const router = useRouter()
const rememberPwd = ref(true)
const form = reactive({
    username: '',
    password: ''
})
//记住密码
// 初始化记住密码
onMounted(() => {
    const saved = getFromLocal('login_info')
    if (saved) {
        form.value = saved
        rememberPwd.value = true
    }
})


//点击登录
const handleLogin = async () => {
    loading.value = true
    if (rememberPwd.value) {
        saveToLocal('login_info', form)
    } else {
        localStorage.removeItem('login_info')
    }

    examApi.login(form).then(async (res) => {
        if (res.code == 200) {
            localStorage.setItem('exam_token', res.data.token)
            loading.value = false
            router.push('/confirm')
        } else {
            loading.value = false
        }
    })
}
//获取登录信息
const getUserinfo = async () => {
    examApi.getProfile().then(res => {
        console.log(res);
        if (res.code == 200) {
            localStorage.setItem('userinfo', JSON.stringify(res.data.user))
        }
    })
}
// 原有逻辑保持不变...
</script>
<style lang="scss" scoped>
.login-container {
    height: 100vh;
    background: #f8fcf9;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: auto;

    // 四角装饰图案
    &::before,
    &::after {
        content: '';
        position: absolute;
        width: 120px;
        height: 120px;
        background-size: contain;
        opacity: 0.08;
        z-index: 0;
    }

    &::before {
        top: 20px;
        left: 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L3.5 20.5L12 15l8.5 5.5L12 2z' stroke='%231c994c' stroke-width='1'/%3E%3C/svg%3E");
    }

    &::after {
        bottom: 20px;
        right: 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%231c994c' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='4' stroke='%231c994c' stroke-width='1'/%3E%3C/svg%3E");
    }

    .system-brand {
        margin-top: 80px;
        text-align: center;
        padding: 2rem 0;
        position: relative;

        .system-title {
            color: #1a3d5d;
            font-size: 2.5rem;
            margin: 0.5rem 0;
            font-weight: 600;
            letter-spacing: 2px;
            position: relative;
            display: inline-block;

            // 标题装饰线
            &::after {
                content: '';
                position: absolute;
                bottom: -8px;
                left: 50%;
                transform: translateX(-50%);
                width: 40%;
                height: 2px;
                background: linear-gradient(90deg, transparent 0%, #1c994c 50%, transparent 100%);
            }
        }
    }

    .login-card {
        width: 440px;
        border-radius: 16px;
        margin: 2rem 0;
        background: #fff;
        box-shadow: 0 4px 24px rgba(28, 153, 76, 0.08);
        border: 1px solid #e0f2e9;
        position: relative;
        z-index: 2;

        // 卡片四角装饰
        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            border: 2px solid #c8e6c9;
        }

        &::before {
            top: 12px;
            left: 12px;
            border-right: 0;
            border-bottom: 0;
        }

        &::after {
            bottom: 12px;
            right: 12px;
            border-left: 0;
            border-top: 0;
        }

        .card-header {
            padding: 2rem;
            text-align: center;

            .welcome-text {
                color: #1a3d5d;
                font-size: 1.8rem;
                margin-bottom: 0.5rem;
                position: relative;
            }

            .welcome-tip {
                color: #7f8c8d;
                font-size: 0.95rem;
                letter-spacing: 0.5px;
            }
        }

        .custom-input {
            margin: 1.5rem 2rem;

            :deep(.el-input__wrapper) {
                background: #f8fcf9;
                border-radius: 8px;
                border: 1px solid #d8e9df;
                height: 48px;
                padding: 0 16px;
                transition: border-color 0.3s;

                &:hover {
                    border-color: #a3d6b4;
                }

                &.is-focus {
                    border-color: #1c994c;
                    box-shadow: 0 0 0 2px rgba(28, 153, 76, 0.1);
                }
            }

            .input-icon {
                color: #94c0a4;
                font-size: 18px;
            }
        }

        .login-btn {
            width: 100%;
            height: 48px;
            background: #1c994c;
            color: white;
            border-radius: 8px;
            font-size: 1rem;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;

            // 按钮装饰线
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 50%;
                height: 100%;
                background: linear-gradient(to right,
                        rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0.2) 50%,
                        rgba(255, 255, 255, 0) 100%);
                transform: skewX(-20deg);
            }

            &:hover::after {
                animation: btnShine 1.5s;
            }
        }

        .footer {
            padding: 1.5rem;
            position: relative;

            .el-divider {

                &::before,
                &::after {
                    border-color: rgba(200, 230, 201, 0.4);
                }
            }

            .record-info {
                color: #95a5a6;
                font-size: 0.85rem;
                text-align: center;
            }
        }
    }

    // 隐藏动态元素
    .particle-storm,
    .bubble-3d,
    .decorate-circle {
        display: none;
    }

    // 新增静态装饰元素
    .static-leaf {
        position: absolute;
        opacity: 0.1;
        z-index: 1;

        &:nth-child(1) {
            top: 22%;
            left: 8%;
            width: 40px;
            height: 40px;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%231c994c'%3E%3Cpath d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm-1 4h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E");
        }

        &:nth-child(2) {
            bottom: 18%;
            right: 5%;
            width: 32px;
            height: 32px;
            transform: rotate(15deg);
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23167941'%3E%3Cpath d='M19.5 3C17.43 3 15 7.07 15 12s2.43 9 4.5 9c1.38 0 3.5-3.03 3.5-9s-2.12-9-3.5-9zm-15 0C4.47 3 3 7.07 3 12s1.47 9 3.5 9c1.38 0 2.5-3.03 2.5-9S7.88 3 6.5 3z'/%3E%3C/svg%3E");
        }
    }
}

@keyframes btnShine {
    100% {
        left: 150%;
    }
}
</style>